<template>
    <div class="page">
        <a-form class="form">
            <a-range-picker class="mar-r10" size="small" style="width: 238px;height: 32px"
                @change="rangeDatePickerChange"
                v-model:value="tableQuery.rangeTime"
                format="YYYY-MM-DD"
                valueFormat="YYYY-MM-DD"
                picker="date"
                allowClear />
            <lo-select class="mar-r10 w100" v-model:value="tableQuery.transType" placeholder="任务类型">
                <a-select-option value="00">转账</a-select-option>
                <a-select-option value="01">提现</a-select-option>
            </lo-select>
            <a-input class="form-item" v-model:value="tableQuery.keyWord" placeholder="关键词搜索"></a-input>
            <a-button class="form-btn" @click="pageChange(1)" type="primary">查询</a-button>
        </a-form>
        <div class="page_content flex-column">
            <div class="flex-1">
                <table-container v-slot="{ containerHeight }">
                    <lo-table :columns="tableColmun" :dataSource="tableData" :height="containerHeight">
                        <template #bodyCell="{ column, record }">
                            <template v-if="column.dataIndex == 'transType'">
                                <span v-if="record.transType == '00'">转账</span>
                                <span v-if="record.transType == '01'">提现</span>
                            </template>
                            <template v-if="column.dataIndex == 'transStatus'">
                                <span v-if="record.transStatus == '-1'">未发起</span>
                                <span v-if="record.transStatus == '00'">已发起</span>
                                <span v-if="record.transStatus == '01'">成功</span>
                                <span v-if="record.transStatus == '02'">失败</span>
                            </template>
                        </template>
                    </lo-table>
                </table-container>
            </div>
            <div class="pager">
                <a-pagination @change="pageChange" v-model:current="tablePager.index" :pageSize="tablePager.size"
                    :total="tablePager.total" :showSizeChanger="false" />
            </div>
        </div>
    </div>
</template>

<script lang="jsx" setup>
import { ref, onMounted, onActivated, nextTick } from 'vue'
import { getTransOrders } from '@/api/system'
import md5 from 'js-md5'
import { useStore } from 'vuex'
const Store = useStore()

onMounted(() => {
    getList()
})



// ************ account list ************
const tableQuery = ref({
    rangeTime: [],
    orderNo: '',
    batchNo: '',
    keyWord: '',
    transType: '', //00转账，01提现
})
const tableColmun = ref([
    { title: '序号', type: 'index', },
    { title: '订单号', dataIndex: 'orderNo', width: '150px' },
    { title: '批次号', dataIndex: 'FBatchNo', width: '150px' },
    { title: '类型', dataIndex: 'transType', width: '70px' },
    // -1 未发起，00已发起， 01成功，02失败
    { title: '状态', dataIndex: 'transStatus', width: '70px' },
    { title: '转出账户名', dataIndex: 'outAccountName', width: '120px' },
    { title: '转出账户', dataIndex: 'outAccountNo', width: '180px' },
    { title: '转入账户名', dataIndex: 'inAccountName', width: '120px' },
    { title: '转入账户', dataIndex: 'inAccountNo', width: '180px' },
    { title: '金额', dataIndex: 'transAmount', width: '80px' },
    { title: '时间', dataIndex: 'createTime', width: '160px' },
    { title: '银行备注', dataIndex: 'payRemark', width: '160px', ellipsis: true },
    { title: '备注', dataIndex: 'orderRemark', width: '160px', ellipsis: true },
])
const tablePager = ref({
    index: 1,
    total: 0,
    size: 30
})
const tableData = ref([])
function pageChange(e) {
    tablePager.value.index = e
    setTimeout(getList)
}
function getList() {
    getTransOrders({
        startTime: tableQuery.value.rangeTime[0] || '',
        endTime: tableQuery.value.rangeTime[1] || '',
        keyWord: tableQuery.value.keyWord,
        transType: tableQuery.value.transType,
        pageIndex: tablePager.value.index,
        pageSize: tablePager.value.size
    }).then(res => {
        tableData.value = res.data.data.list
        tablePager.value.total = +res.data.data.total
    })
}

</script>

<style lang="less" scoped></style>
